<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core"%>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>忘记密码</title>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/forget.css"/>
		<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.min.js/"></script>
		<script type="text/javascript"src="${pageContext.request.contextPath}/static/js/forget.js"></script>
		<script type='text/javascript'> 
			var code ; //在全局定义验证码
			function createCode(){
				code = "";
				var codeLength = 4;//验证码的长度
				var checkCode = document.getElementById("code");  
				var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');//随机数  
				for(var i = 0; i < codeLength; i++) {//循环操作
					var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）
					code += random[index];//根据索引取得随机数加到code上
				}
				checkCode.value = code;//把code值赋给验证码
			}
			function validate(){  
				var inputCode = document.getElementById("yzm").value.toUpperCase(); //取得输入的验证码并转化为大写
				var inputname = document.getElementById("username").value;
				if(inputname.length<3)
				{
					alert("请输入3-10位用户名！");
					return false;
				}
				if(inputCode.length <= 0) { //若输入的验证码长度为0
					
					alert("请输入验证码！"); //则弹出请输入验证码
					return false;
				}
				else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时
					alert("验证码输入错误！"); //则弹出验证码输入错误
					return false;
				}
				else { //输入正确时  
					return true;
				} 
			}
            var show_num = [];
            draw(show_num);
            $("#canvas").on('click',function(){
                draw(show_num);
            })
            var flagusername =true;
            //用户名是否存在
            $("#username").change(function(){
                var userName = $('#username').val();
                var method="usernamesure";
                $.post("/BookStore/user.do",{userName:userName,method:method},function(data){
                    if(data==0)
                    {
                        flagusername=true;
                        $("#error_userName").html("");
                    }
                    else
                    {
                        flagusername=false;
                        $("#error_userName").html("用户名不存在！");
                    }
                },'text');
            });
		</script>
	</head>
	<body onload='createCode()'>
		<div class="top">
			<div class="cent ClearFix">
				<div class="top_logo">
					<a href="${pageContext.request.contextPath}/index">
						<h1>畅读小说&nbsp;&nbsp;|&nbsp;&nbsp;重置密码</h1>
					</a>
				</div>
				<div class="top_right">
					<ul>
						<li>请<a href="${pageContext.request.contextPath}/loginAndRegist.jsp" style="color: red;">登录</a>/<a href="${pageContext.request.contextPath}/loginAndRegist.jsp">免费注册</a></li>
					</ul>	
				</div>
			</div>
		</div>
		<div id="big">
            <div class="section_subnav">
                <ul class="subnav_process">
		            <li class="active">
                        <div>
                        	<div class="circle_t">1</div>
                            <p>填写帐号</p>
                        </div>
                    </li>
                    <li>
                        <div>
                            <div class="circle_ut">2</div>
                            <p>身份验证</p>
                    </div>
                        <i></i>
                    </li>
                    <li>
                        <div>
                            <div class="circle_ut">3</div>
                            <p>设置新密码</p>
                        </div>
                        <i></i>
                    </li>
                    <li class="last">
                        <div>
                            <div class="circle_ut">4</div>
                            <p>完成</p>
                        </div>
                    </li>
                </ul>
              </div>
		</div>
		<div class="midcent ClearFix">
			<div class="logo_box ClearFix">
				<div class="login_form ClearFix">
					<div class="login_ju ClearFix">
					  <div class="co"> 
                        <div class="form">
                        <form id="regist_form" method="post" action="<c:url value="/user/forget1" />" onsubmit="return validate()">
                        	<input type="hidden" name="method" value="forget1" />
                        	<div class="item item1">
                                <h2>填&nbsp;写&nbsp;账&nbsp;号</h2>
                            </div>
                        	<div class="item item1">
                                <input placeholder="请输入用户名" class="itxt" autocomplete="off" tabindex="1" maxlength="20" name="username" id="username" type="text">
                                <span id="usenamespan"></span>
                            </div>
                            <div class="item item3">
                                <input placeholder="验证码" autocomplete="off" tabindex="6" maxlength="4" size="10" class="yzm" name="yzm" id="yzm" type="text">
                                <input type="button" id="code" onclick="createCode()" title='点击更换验证码' /> 
                            </div>
                            <div class="item item5">
                                <div class="login-btn">
                                	<input type="submit" value="下&nbsp&nbsp一&nbsp&nbsp步"/>
                                </div>
                            </div>
                        </form>
                        </div>
					   </div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
